<template>
  <div>
    <el-container>
      <!-- 顶部容器 -->
      <el-header style="display: flex; align-items: center; background-color:#545c64">
        <!-- 系统图标 -->
        <i class="el-icon-set-up" style="color: #fff; font-size: 15px;margin-right: 990px"> 后台管理系统</i>
        <!-- 全局搜索框 -->
        <el-input
            placeholder="请输入关键字全站搜索" prefix-icon="el-icon-search"
            style="width: 250px; margin-right: 10px;">
        </el-input>
        <!-- 用户 -->
        <el-dropdown size="mini" split-button>
          <i class="el-icon-user-solid"> {{ user["userName"] }}</i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <div @click="logout">退出登录</div>
            </el-dropdown-item>
            <el-dropdown-item>更换账户</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <!-- 侧边栏容器 -->
        <el-aside width="200px" style="overflow: hidden; min-height: 100vh; background-color: #545c64 ">
          <!-- 快捷菜单 -->
          <el-menu :default-active="$route.path" router
                   background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
                   style="border-right: none !important;">
            <!-- 主页 -->
            <el-menu-item index="/home">
              <i class="el-icon-menu"></i>
              <span slot="title">主页</span>
            </el-menu-item>
            <!-- 商品页 -->
            <el-submenu index="/product">
              <template slot="title">
                <i class="el-icon-goods"></i>
                <span>商品</span>
              </template>
              <el-menu-item index="/product/list">商品列表</el-menu-item>
              <el-menu-item index="/product/classify">商品分类</el-menu-item>
            </el-submenu>

            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-s-claim"></i>
                <span>订单</span>
              </template>
              <el-menu-item index="3-1">全部订单</el-menu-item>
              <el-menu-item index="3-2">订单评价</el-menu-item>
            </el-submenu>

            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>应用</span>
              </template>
              <el-menu-item index="4-1">优惠卷</el-menu-item>
              <el-menu-item index="4-2">秒杀</el-menu-item>
              <el-menu-item index="4-3">现时折扣</el-menu-item>
            </el-submenu>

            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>客户</span>
              </template>
              <el-menu-item-group title="用户管理">
                <el-menu-item index="5-1">全部用户</el-menu-item>
                <el-menu-item index="5-2">用户分群</el-menu-item>
                <el-menu-item index="5-3">用户标签</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="用户运营">
                <el-menu-item index="5-4">用户群运营</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="会员管理">
                <el-menu-item index="5-5">会员用户查询</el-menu-item>
                <el-menu-item index="5-6">付费会员等级</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-data-line"></i>
                <span>数据</span>
              </template>
              <el-menu-item-group title="运营数据">
                <el-menu-item index="6-1">数据概括</el-menu-item>
                <el-menu-item index="6-2">交易分析</el-menu-item>
                <el-menu-item index="6-3">商品分析</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="流量分析">
                <el-menu-item index="6-4">事件分析</el-menu-item>
                <el-menu-item index="6-5">漏斗分析</el-menu-item>
                <el-menu-item index="6-6">留存分析</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-setting"></i>
                <span>设置</span>
              </template>
              <el-menu-item-group title="组织管理">
                <el-menu-item index="7-1">部门管理</el-menu-item>
                <el-menu-item index="7-2">权限管理</el-menu-item>
                <el-menu-item index="7-3">员工列表</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="模板管理">
                <el-menu-item index="7-4">运营模板</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 主要区域容器 -->
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "layout",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  methods: {
    logout() {
      localStorage.removeItem("user")
      this.$router.push("/login")
    }
  }
}
</script>

<style>

</style>
